<script type="text/javascript" src="<?php echo $GLOBALS['base_path']?>public/js/fquery.js"></script>
<script type="text/javascript">
    everyTime(5000 , function() {
        ajaxGet("<?php echo $this->createUrl('home/countUnreadNotifications');?>" , function(result){
            if (result != 0)
               document.getElementById('notificationLink').innerHTML = "Notifikasi <span style=\"color: #F50505;font-weight: bold;\">("+result+")</span>";
            else
               document.getElementById('notificationLink').innerHTML = "Notifikasi";
        });
    });
</script>
<div id="header">
    <?php if(isset($this->auth)) : ?>
        <div id="notificationBar">
            <a id="notificationLink" href="<?php echo $this->createUrl('notification/index'); ?>">Notifications</a>
        </div>
    <?php endif ?>
    <ul id="accountBar">
        <li>
            <?php if ($this->auth == null) :?>
            <?php else:?>
            Welcome, <?php echo $this->auth->username;?>
            <?php endif;?>
        </li>
        <li>
            <?php if ($this->auth != null) :?>
                <a href="<?php echo $this->createUrl('home/logout');?>">Logout</a>
            <?php endif;?>
        </li>
        <?php if($this->auth == null) : ?>
        <li>
            <form id="loginForm" action="<?php echo $this->createUrl('home/login');?>" method="post">
                <label for="username">Username</label>
                <input type="text" id="username" name="username"/>
                <label for="username">Password</label>
                <input type="password" id="password" name="password"/>
                <input type="submit" value="Login"/>
            </form>
        </li>
        <?php endif; ?>
    </ul>
</div>